<template>
  <div class="list">
    <div class="top">
      <!-- <planSearch @search="search"></planSearch> -->
      <!-- <el-button type="primary"
                 size="mini"
                 style="background-color:#0268F4"
                 @click="openDialog">船期申报</el-button> -->
      <div class="left">
        <div :class="activeIndex==null?'active':''"
             @click="changeTab(null)">全部订单</div>
        <div :class="activeIndex==0?'active':''"
             @click="changeTab(0)">未审核</div>
        <div :class="activeIndex==1?'active':''"
             @click="changeTab(1)">已审核</div>
      </div>
      <div class="middle"
           @click="changeTab(5)">
        委托回收站
      </div>
      <div class="right">
        <!-- <el-popover placement="bottom"
                    popper-class="down-popover"
                    trigger="hover">
          <div class="btns">
            <span @click="toAdd('addContainer')">集装箱船期</span>
            <span @click="toAdd('addBulk')">件散货船期</span>
          </div>
          <el-button type="primary"
                     slot="reference"
                     style="background:#0F47B8;margin-right:10px"> + 船期申报</el-button>
        </el-popover> -->
        <el-input placeholder="船名搜索"
                  clearable
                  v-model="condition.vesselName"
                  class="input-with-select">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="find()"></el-button>
        </el-input>
      </div>
    </div>
    <div class="select">
      <el-dropdown @command="command">
        <span>
          {{text1}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item,index in list1"
                            :key="index">{{item.text}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="command1">
        <span>
          {{text2}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item in statusList"
                            :key="item.value">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="command2">
        <span>
          {{text3}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item,index in typeList"
                            :key="index">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <myTable :data="tableData"
             @del="del"></myTable>
    <!-- <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="termName"
                       label="码头名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="checkStatusName"
                       label="审核状态"
                       width="180">
        <template slot-scope="scope">
          <div class="circle">
            <span :style="{background:colors[scope.row.checkStatus]}"></span>
            <span>{{scope.row.checkStatusName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="vesselName"
                       label="船舶名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="ivoyage"
                       label="进口航次"
                       width="180">
      </el-table-column>
      <el-table-column prop="evoyage"
                       label="出口航次"
                       width="180">
      </el-table-column>
      <el-table-column prop="eta"
                       label="计划抵港时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="etd"
                       label="计划离港时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="intradeName"
                       label="内外贸"
                       width="180">
      </el-table-column>
      <el-table-column prop="vtpcodeName"
                       label="船舶类型"
                       width="180">
      </el-table-column>
      <el-table-column prop="slnIdName"
                       label="营运人航线"
                       width="180">
      </el-table-column>
      <el-table-column prop="cstShippinglineName"
                       label="船公司"
                       width="180">
      </el-table-column>
      <el-table-column prop="remark"
                       label="船期备注"
                       width="180">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.checkStatus=='3'"
                     @click="cancel(scope.row.id)"
                     type="text"
                     style="color: #1955CF">取消</el-button>
          <template v-if="scope.row.checkStatus=='0' || scope.row.checkStatus=='2' || scope.row.checkStatus=='4'">
            <el-button @click="edit(scope.row.id)"
                       type="text"
                       style="color: #1955CF">编辑</el-button>
            <el-button type="text"
                       style="color:  #eb2a2a"
                       @click="del(scope.row.id)">删除</el-button>
          </template>

          <el-button v-if="scope.row.checkStatus=='3' || scope.row.checkStatus=='6' || scope.row.checkStatus=='7'"
                     @click="toShipOn(scope.row,'I')"
                     type="text"
                     style="color: #1955CF">卸船清单</el-button>
          <el-button v-if="scope.row.checkStatus=='3' || scope.row.checkStatus=='6' || scope.row.checkStatus=='7' || scope.row.checkStatus=='8'"
                     @click="toShipOn(scope.row,'E')"
                     type="text"
                     style="color: #1955CF">船装清单</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <div class="page">
      <el-pagination background
                     :total="condition.total"
                     :page-size="condition.size"
                     :page-sizes="[5, 10, 15, 20]"
                     :current-page.sync="condition.current"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     layout="total,sizes,prev, pager, next,jumper">
      </el-pagination>
    </div>
    <el-dialog title="船期申报"
               width="700px"
               :visible.sync="dialogVisible">
      <addPlan @closeDialog="closeDialog"
               @onSubmit="onSubmit"
               v-if="dialogVisible"
               :id="id"></addPlan>
    </el-dialog>
  </div>
</template>

<script>
import planSearch from '../components/planSearch.vue'
import addPlan from '../components/addPlan.vue'
import myTable from './myTable.vue'
import moment from 'moment'
export default {
  name: 'shipPlanList',
  components: { planSearch, addPlan, myTable },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      condition: {
        vesselName: '',
        termCode: '',
        etaMin: '',
        etaMax: '',
        scdType: '',
        checkStatus: '',
        size: 5,
        current: 1,
        total: 0,
      },
      id: '', //编辑
      colors: [
        '#1075FF',
        '#13D55C',
        '#FF9000',
        '#2970FF',
        '#F56C6C',
        '#043AA7',
        '#00BAFF',
        '#00BAFF',
        '#DDDDDD',
      ],
      activeIndex: null,
      list1: [
        {
          text: '全部时间',
          value: [null, null],
        },
        {
          text: '本月',
          value: [
            moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
            moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
          ],
        },
        {
          text: '近三个月',
          value: [
            moment()
              .subtract(2, 'months')
              .startOf('month')
              .format('YYYY-MM-DD HH:mm:ss'),
            moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
          ],
        },
        {
          text: '近半年',
          value: [
            moment()
              .subtract(5, 'months')
              .startOf('month')
              .format('YYYY-MM-DD HH:mm:ss'),
            moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
          ],
        },
        {
          text: '全年',
          value: [
            moment()
              .subtract(11, 'months')
              .startOf('month')
              .format('YYYY-MM-DD HH:mm:ss'),
            moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
          ],
        },
      ],
      statusList: [
        { name: '全部动态', value: null },
        {
          name: '待审核',
          value: 0,
        },
        {
          name: '审核通过',
          value: 1,
        },
        {
          name: '审核未通过',
          value: 2,
        },
        {
          name: '预报',
          value: 3,
        },
        {
          name: '下发失败',
          value: 4,
        },
        {
          name: '取消',
          value: 5,
        },
        {
          name: '确报',
          value: 6,
        },
        {
          name: '在港',
          value: 7,
        },
        {
          name: '离港',
          value: 8,
        },
      ],
      typeList: [
        { name: '全部类型', value: null },
        { name: '集装箱船期', value: 'CONTAINER' },
        { name: '件散货船期', value: 'BULK_CARGO' },
      ],
      text1: '近三个月',
      text2: '全部动态',
      text3: '全部类型',
    }
  },

  methods: {
    openDialog() {
      this.id = ''
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    onSubmit() {
      this.dialogVisible = false
      this.find()
    },
    toShipOn(row, t) {
      this.$api.findOneBeforeBill({ id: row.id }).then((res) => {
        let voyId
        if (t == 'E') {
          voyId = res.data.evoyageId
        } else if (t == 'I') {
          voyId = res.data.ivoyageId
        }
        if (!voyId) {
          this.$message.error('不可操作')
          return
        }
        this.$api
          .billCheckJX({ voyId })
          .then((res) => {
            if (res.data) {
              let name = t == 'E' ? 'shipOn' : 'shipOff'
              this.$router.push({
                name,
                query: { id: row.id, ivoyageName: row.ivoyageName },
              })
            }
          })
          .catch((err) => {})
      })
    },
    edit(id) {
      this.dialogVisible = true
      this.id = id
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示')
        .then(() => {
          this.$api.delSchedules({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.find()
            }
          })
        })
        .catch(() => {})
    },
    cancel(id) {
      this.$api.cancelSchedules({ id }).then((res) => {
        this.$message.success('取消成功')
        this.find()
      })
    },
    find() {
      this.$api.find(this.condition).then((res) => {
        this.tableData = res.data.data
        this.condition.total = res.data.recordsTotal
      })
    },
    search(e) {
      this.condition = { ...this.condition, ...e }
      this.find()
    },
    currentChange(e) {
      this.condition.current = e
      this.find()
    },
    sizeChange(e) {
      this.condition.size = e
      this.find()
    },
    changeTab(v) {
      this.activeIndex = v
      this.condition.checkStatus = v
      this.find()
    },
    command(v) {
      this.condition.etaMin = v.value[0]
      this.condition.etaMax = v.value[1]
      this.text1 = v.text
      this.find()
    },
    command1(v) {
      this.activeIndex = null
      this.text2 = v.name
      this.condition.checkStatus = v.value
      this.find()
    },
    command2(v) {
      this.text3 = v.name
      this.condition.scdType = v.value
      this.find()
    },
    toAdd(e, v) {
      this.$router.push({
        name: e,
        query: {
          scdType: v,
        },
      })
    },
  },

  computed: {},

  mounted() {
    this.condition.etaMin = this.list1[2].value[0]
    this.condition.etaMax = this.list1[2].value[1]
    this.find()
  },
}
</script>
<style>
.down-popover {
  padding: 0;
}
</style>
<style lang='less' scoped>
.list {
  background-color: #fff;
  padding: 16px 14px;
  min-height: 800px;
  position: relative;
}
.page {
  text-align: right;
  margin-top: 20px;
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  .left {
    display: flex;

    div {
      margin-right: 10px;
      padding-bottom: 4px;
      cursor: pointer;
    }
  }
  .middle {
    cursor: pointer;
  }
  .right {
    display: flex;
  }
}

.btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  span {
    height: 40px;
    line-height: 40px;
    width: 100%;
    cursor: pointer;
    text-align: center;
  }
  span:hover {
    background: #0f47b8;
    color: #fff;
  }
}
.active {
  border-bottom: 2px solid #0f47b8;
  color: #0f47b8;
}
.select {
  margin-top: 10px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.el-dropdown {
  margin-right: 200px;
  width: 150px;
  text-align: center;
}
</style>